<link rel="stylesheet" href="/assets/home/plugin/ckplayer/css/ckplayer.css" />
<link rel="stylesheet" href="/assets/home/css/details.css" />
<!-- 加载ckplayer视频插件 -->
<script src="/assets/home/plugin/ckplayer/js/ckplayer.min.js"></script>
<script src="/assets/home/js/jquery-1.9.1.min.js"></script>

<body>
  <div id="cover">
    <!-- 课程封面 -->
    <img class="cover_bg" src="{$subject.thumbs_text}" />
    <!-- 中间播放键 -->
    <div id="play">
      <img src="/assets/home/images/play.png" />
    </div>
  </div>

  <!-- ckplayer视频容器元素 -->
  <div id="video"></div>

  <!-- 课程信息 -->
  <div class="head">
    <div class="info">
      <h4 class="name">{$subject.title}</h4>
      <div class="action">
        {if condition="$subject.like_status"}
        <!-- 已点赞 -->
        <img id="like" data-status="remove" class="thumbs" src="/assets/home/images/thumbs-up.png" alt="">
        {else /}
        <!-- 未点赞 -->
        <img id="like" data-status="add" class="thumbs" src="/assets/home/images/thumbs.png" alt="">
        {/if}
        <span class="num">{$subject.likes_text}</span>
      </div>
    </div>
  </div>

  <div class="title">课程信息</div>
  <table class="list">
    <tr>
      <td>课程名称</td>
      <td>{$subject.title}</td>
    </tr>
    <tr class="price">
      <td>课程价格</td>
      <td>￥{$subject.price}元</td>
    </tr>
    <tr>
      <td>发布时间</td>
      <td>{$subject.createtime_text}</td>
    </tr>
    <tr>
      <td>章节总数</td>
      <td>{$chapter|count}小节</td>
    </tr>
  </table>

  <div class="title">课程介绍</div>
  <div class="mui-table-view content">{$subject.content}</div>

  <div class="title">课程章节</div>
  <ul id="chapter" class="mui-table-view">
    {if condition="$chapter"}
    {foreach $chapter as $key=>$item}
    <li data-cid="{$item.id}" class="item mui-table-view-cell">第{$key + 1}节 - {$item.title}</li>
    {/foreach}
    {else /}
    <li class="mui-table-view-cell">暂无课程章节</li>
    {/if}
  </ul>

  <!-- 评论内容 -->
  {if condition="$comment"}
  <div class="title">用户评论</div>

  <ul class="mui-table-view">
    {foreach $comment as $item}
    <li class="mui-table-view-cell mui-media">
      <a href="javascript:;">
        <img class="mui-media-object mui-pull-left userimg" src="{$item.business.avatar_text}">
        <div class="mui-media-body">
          {$item.business.nickname ? $item.business.nickname : '匿名'}
          <p class='mui-ellipsis'>{$item.content}</p>
        </div>
      </a>
    </li>
    {/foreach}
  </ul>

  <div class="more">
    <a href="{:url('home/index/comment_list', ['pid' => $subject['id']])}"
      class="mui-btn mui-btn-primary mui-btn-outlined">查看更多评论</a>
  </div>
  {/if}

  <!-- 弹出菜单 -->
  <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a id="buy" href="javascript:void(0)">
          立即购买
        </a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>
      </li>
    </ul>
  </div>

  <!-- 底部 -->
  {include file="common/footer" /}
</body>

<script>
  // 获取课程id
  var subid = `{$subject.id}`;

  //章节id
  var cid = 0;

  //播放器变量
  var player;

  // 点击切换章节的方法
  $("#chapter .item").click(function () {
    // 拿到点击的章节的id
    cid = $(this).data('cid')

    $(this).css('color', 'blue').siblings().css('color', 'black')

    $("#video").css("display", "none")
    $("#cover").css("display", "block");

    if (player) {
      // 当章节进行切换的时候，暂停该视频
      player.pause()
    }
  })

  // 立即购买后弹框的取消按钮点击事件
  $("#iosActionsheetCancel").click(function () {
    mui('#sheet1').popover('toggle');
  })

  // 点击播放
  $("#play").on('click', function () {
    //发送ajax请求
    $.ajax({
      url: `{:url('home/index/play')}`,
      type: 'post',
      data: { subid, cid },
      dataType: 'json',
      success: function (success) {
        if (success.code == 0) {
          mui.toast(success.msg)
          return false;
        }

        var data = success.data

        //没购买，要弹出购买菜单
        if (data.hasOwnProperty('status') && data.status == 'buy') {
          mui('#sheet1').popover('toggle');
          return false;
        }

        // 显示与隐藏
        $("#video").css("display", "block")
        $("#cover").css("display", "none");

        //准备播放
        var options = {
          container: '#video', //容器
          video: data.url, //播放地址
          autoplay: true,//是否自动播放
          webFull: true,//是否启用页面全屏按钮，默认不启用
          theatre: true,//是否启用剧场模式按钮，默认不启用
          controls: true,//是否显示自带控制栏
          rightBar: true,//是否开启右边控制栏
          smallWindows: true,//是否启用小窗口模式
          smallWindowsDrag: true,//小窗口开启时是否可以拖动
          screenshot: true,//截图功能是否开启
          playbackrateOpen: true,//是否开启控制栏倍速选项
          playbackrateList: [0.75, 1, 1.25, 1.5, 2, 4],//倍速配置值
          timeScheduleAdjust: 1,//是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动
        }

        player = new ckplayer(options);//初始化播放器
      },
    })
  })

  // 点击立即购买的菜单
  $("#buy").on('click', function () {
    mui('#sheet1').popover('toggle');
    var btnArray = ['否', '是'];
    mui.confirm('请问您确认购买吗？', '尊敬的用户', btnArray, function (e) {
      if (e.index == 1) {
        // 发送ajax请求
        $.ajax({
          url: `{:url('home/index/buy')}`,
          type: 'post',
          data: { subid },
          dataType: 'json',
          success: function (success) {
            if (success.code == 0) {
              mui.toast(success.msg)
              return false
            }

            mui.toast(success.msg)

            setTimeout(() => {
              location.reload()
            }, 1000)
          },
          error: function (error) {
            console.log(error);
          }
        })
      }
    })
  })

  //点赞
  $("#like").click(function () {

    // 获取到点赞的状态
    var status = $(this).data('status');

    // 发送ajax请求
    $.ajax({
      url: `{:url("home/index/like")}`,
      type: 'post',
      data: { subid, status },
      dataType: 'json',
      success: function (success) {
        // 提醒
        mui.toast(success.msg, { duration: 500 })

        setTimeout(() => {
          // 重新加载
          location.reload()
        }, 500)
      }
    })
  })

</script>